import React, { useState, useEffect } from 'react';
import ArticleManagement from './ArticleManagement';
import MemberManagement from './MemberManagement';
import './styles.css';

function AdminPanel({ onClose }) {
  const [activeTab, setActiveTab] = useState('articles');

  return (
    <div className="admin-panel">
      <div className="admin-panel-header">
        <h2>管理员面板</h2>
        <button className="close-btn" onClick={onClose}>×</button>
      </div>
      
      <div className="admin-panel-sidebar">
        <nav className="admin-nav">
          <button 
            className={`nav-item ${activeTab === 'articles' ? 'active' : ''}`}
            onClick={() => setActiveTab('articles')}
          >
            文章管理
          </button>
          <button 
            className={`nav-item ${activeTab === 'members' ? 'active' : ''}`}
            onClick={() => setActiveTab('members')}
          >
            会员管理
          </button>
        </nav>
      </div>
      
      <div className="admin-panel-content">
        {activeTab === 'articles' && <ArticleManagement />}
        {activeTab === 'members' && <MemberManagement />}
      </div>
    </div>
  );
}

export default AdminPanel;
